<!DOCTYPE html>
<link href="ui/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="ui/css/bootstrap-themes.css" rel="stylesheet" type="text/css">
<link href="ui/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ui/js/npm.js"></script>
<script type="text/javascript" src="ui/js/bootstrap.js"></script>
<script type="text/javascript" src="ui/js/bootstrap.min.js"></script>
<html>
<head>
	<meta charset="utf-8">
	<title>Video Recommend</title>
	<link rel="stylesheet" type="text/css" href="public.css">
</head>
<body onload="ajax_method('http://127.0.0.1/tradWebAPI/videoRecommend.php')">
<div class="jumbotron">
  <h1>影碟出租管理系统</h1>
  <p>Video rental Management System</p>
</div>
<ul class="nav nav-pills nav-justified " style="margin-top:-30px;">
	<li role="presentation" ><a href="searchCompactDisk.html">影碟查询</a></li>
	<li role="presentation" class="active"><a href="videoRecommend.html">影碟推荐</a></li>
	<li role="presentation"><a href="playCompactDisk.html">影碟预览</a></li>
</ul>
	<script type="text/javascript">
		function ajax_method(url) {
		  var xhr = new XMLHttpRequest();
		  
		  xhr.onreadystatechange = function() {
		    if(xhr.readyState==4 && xhr.status==200) {
		        var data = JSON.parse(xhr.responseText);
		        var output = '';
		        if (data.code == 200) {
		            if (data.res != null) {                      
		              for(var i in data.res) {		                
		                output += `
		                  <ul>
		                    <li>影碟编号 : ${data.res[i].serial_number}</li>
		                    <li>影碟名称 : ${data.res[i].video_name}</li>
		                    <li>主演 : ${data.res[i].lead_actor}</li>
		                    <li>库存 : ${data.res[i].stock}</li>
		                    <li>预影碟预览链接 : ${data.res[i].position}</li>
		                    <li>影碟价格 : ${data.res[i].price}</li>
		                  </ul>
		                `;
		              }
		              document.getElementById("result").innerHTML = output;	              
		            }else{
		              alert(data.state);
		            }
		        } else {
		            alert(data.state);
		        }
		    }
		  }

		  xhr.open("GET", url, true);
		  xhr.send();
		}
	</script>

	<form>
		<!-- <input type="button" value="GET" onclick="ajax_method('videoRecommend.php')"> -->
		<div id="result"></div>
	</form>
	
</body>
</html>